<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./common.css">
    <link rel="stylesheet" href="./weui-button.css">
    <link rel="stylesheet" href="./weui-primary-loading.css">
</head>
<body>
    <!-- 不要看局部，看整体 -->
    <!-- 这是行业的约定 套路 -->
    <!-- 类名更重要 -->
    <!-- css不重要，结构重要 -->
    <!-- 先毛坯房 ，在精装 -->
    <!-- 国际化命名规范，BEM命名 -->
    <!-- 
        .page   Block 开设一个区块
        .page__hd  __Element 元素
        modify
     -->
    <div class="page">
        <div class="page__hd">
            <h1 class="page__title">Button</h1>
            <p class="page__desc">按钮</p>
        </div>
        <div class="page__bd">
            <!-- weui 微信库名 tm tb 不是结构，是组件 -->
            <!-- 用一个下滑线_ 代表按钮处于一个状态下  weui-btn_primary ,各个状态的转化，按钮点击时，按钮加载中。。。-->
            <a href="#" class="weui-btn weui-btn_primary">页面主操作</a>
            <a href="#" class="weui-btn weui-btn_default">页面的次要操作</a>
            <a href="#" class="weui-btn weui-btn_primary weui-btn_disabled">禁用按钮</a> 
            <a href="#" class="weui-btn weui-btn_primary weui-btn_loading">
                <span class="weui-primary-loading weui-primary-loading_transparent">
                    <i class="weui-primary-loading__dot"></i>
                </span>
                加载中按钮
            </a>       
        </div>
    </div>
</body>
</html>


<!-- 
    界面
     1、眼里不是标签，而是样式
     2、先结构  在样式
     3、BEM 国际化命名规范
     4、Block 很多的标签的集合，块功能独立
     5、Block由很多的Element组成 （__）[两个下划线构成]
     6、Modifier  状态  （_)一个下划线的构成
 -->